const ee = Vue.getCurrentScope
const te = Vue.onScopeDispose
const B = Vue.unref
const Q = Vue.getCurrentInstance
const X = Vue.onMounted
const ne = Vue.nextTick
const d = Vue.ref
const re = Vue.isRef
const $ = Vue.watch
const oe = Vue.toRef
const Y = Vue.readonly
const le = Vue.customRef
const x = Vue.computed
const ue = Vue.watchEffect
const se = Vue.defineComponent
const D = Vue.reactive
const ie = Vue.openBlock
const ae = Vue.createElementBlock
const ce = Vue.Fragment
const F = Vue.createElementVNode
const R = Vue.normalizeStyle
const fe = Vue.normalizeClass
const pe = Vue.toDisplayString
function O(e) {
  return ee() ? (te(e), !0) : !1;
}
function S(e) {
  return typeof e == "function" ? e() : B(e);
}
const W = typeof window < "u", G = () => {
};
function de(...e) {
  if (e.length !== 1)
    return oe(...e);
  const t = e[0];
  return typeof t == "function" ? Y(le(() => ({ get: t, set: G }))) : d(t);
}
function J(e, t = !0) {
  Q() ? X(e) : t ? e() : ne(e);
}
function ve(e, t = 1e3, r = {}) {
  const {
    immediate: n = !0,
    immediateCallback: l = !1
  } = r;
  let c = null;
  const o = d(!1);
  function u() {
    c && (clearInterval(c), c = null);
  }
  function s() {
    o.value = !1, u();
  }
  function a() {
    const i = S(t);
    i <= 0 || (o.value = !0, l && e(), u(), c = setInterval(e, i));
  }
  if (n && W && a(), re(t) || typeof t == "function") {
    const i = $(t, () => {
      o.value && W && a();
    });
    O(i);
  }
  return O(s), {
    isActive: o,
    pause: s,
    resume: a
  };
}
function L(e) {
  var t;
  const r = S(e);
  return (t = r == null ? void 0 : r.$el) != null ? t : r;
}
const C = W ? window : void 0, me = W ? window.document : void 0;
function w(...e) {
  let t, r, n, l;
  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([r, n, l] = e, t = C) : [t, r, n, l] = e, !t)
    return G;
  Array.isArray(r) || (r = [r]), Array.isArray(n) || (n = [n]);
  const c = [], o = () => {
    c.forEach((i) => i()), c.length = 0;
  }, u = (i, f, v, y) => (i.addEventListener(f, v, y), () => i.removeEventListener(f, v, y)), s = $(
    () => [L(t), S(l)],
    ([i, f]) => {
      o(), i && c.push(
        ...r.flatMap((v) => n.map((y) => u(i, v, y, f)))
      );
    },
    { immediate: !0, flush: "post" }
  ), a = () => {
    s(), o();
  };
  return O(a), a;
}
function ye() {
  const e = d(!1);
  return Q() && X(() => {
    e.value = !0;
  }), e;
}
function H(e) {
  const t = ye();
  return x(() => (t.value, !!e()));
}
function he(e, t = {}) {
  const {
    immediate: r = !0,
    window: n = C
  } = t, l = d(!1);
  let c = 0, o = null;
  function u(i) {
    if (!l.value || !n)
      return;
    const f = i - (c || i);
    e({ delta: f, timestamp: i }), c = i, o = n.requestAnimationFrame(u);
  }
  function s() {
    !l.value && n && (l.value = !0, o = n.requestAnimationFrame(u));
  }
  function a() {
    l.value = !1, o != null && n && (n.cancelAnimationFrame(o), o = null);
  }
  return r && s(), O(a), {
    isActive: Y(l),
    pause: a,
    resume: s
  };
}
function ge(e, t = {}) {
  const { window: r = C } = t, n = H(() => r && "matchMedia" in r && typeof r.matchMedia == "function");
  let l;
  const c = d(!1), o = () => {
    l && ("removeEventListener" in l ? l.removeEventListener("change", u) : l.removeListener(u));
  }, u = () => {
    n.value && (o(), l = r.matchMedia(de(e).value), c.value = !!(l != null && l.matches), l && ("addEventListener" in l ? l.addEventListener("change", u) : l.addListener(u)));
  };
  return ue(u), O(() => o()), c;
}
var V = Object.getOwnPropertySymbols, _e = Object.prototype.hasOwnProperty, we = Object.prototype.propertyIsEnumerable, be = (e, t) => {
  var r = {};
  for (var n in e)
    _e.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
  if (e != null && V)
    for (var n of V(e))
      t.indexOf(n) < 0 && we.call(e, n) && (r[n] = e[n]);
  return r;
};
function xe(e, t, r = {}) {
  const n = r, { window: l = C } = n, c = be(n, ["window"]);
  let o;
  const u = H(() => l && "ResizeObserver" in l), s = () => {
    o && (o.disconnect(), o = void 0);
  }, a = x(
    () => Array.isArray(e) ? e.map((v) => L(v)) : [L(e)]
  ), i = $(
    a,
    (v) => {
      if (s(), u.value && l) {
        o = new ResizeObserver(t);
        for (const y of v)
          y && o.observe(y, c);
      }
    },
    { immediate: !0, flush: "post", deep: !0 }
  ), f = () => {
    s(), i();
  };
  return O(f), {
    isSupported: u,
    stop: f
  };
}
function j(e, t = {}) {
  const {
    reset: r = !0,
    windowResize: n = !0,
    windowScroll: l = !0,
    immediate: c = !0
  } = t, o = d(0), u = d(0), s = d(0), a = d(0), i = d(0), f = d(0), v = d(0), y = d(0);
  function b() {
    const _ = L(e);
    if (!_) {
      r && (o.value = 0, u.value = 0, s.value = 0, a.value = 0, i.value = 0, f.value = 0, v.value = 0, y.value = 0);
      return;
    }
    const h = _.getBoundingClientRect();
    o.value = h.height, u.value = h.bottom, s.value = h.left, a.value = h.right, i.value = h.top, f.value = h.width, v.value = h.x, y.value = h.y;
  }
  return xe(e, b), $(() => L(e), (_) => !_ && b()), l && w("scroll", b, { capture: !0, passive: !0 }), n && w("resize", b, { passive: !0 }), J(() => {
    c && b();
  }), {
    height: o,
    bottom: u,
    left: s,
    right: a,
    top: i,
    width: f,
    x: v,
    y,
    update: b
  };
}
var Se = Object.defineProperty, q = Object.getOwnPropertySymbols, Ee = Object.prototype.hasOwnProperty, Ae = Object.prototype.propertyIsEnumerable, N = (e, t, r) => t in e ? Se(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, Oe = (e, t) => {
  for (var r in t || (t = {}))
    Ee.call(t, r) && N(e, r, t[r]);
  if (q)
    for (var r of q(t))
      Ae.call(t, r) && N(e, r, t[r]);
  return e;
};
function $e(e) {
  const {
    x: t,
    y: r,
    document: n = me,
    multiple: l,
    interval: c = "requestAnimationFrame",
    immediate: o = !0
  } = e, u = H(() => S(l) ? n && "elementsFromPoint" in n : n && "elementFromPoint" in n), s = d(null), a = () => {
    var f, v;
    s.value = S(l) ? (f = n == null ? void 0 : n.elementsFromPoint(S(t), S(r))) != null ? f : [] : (v = n == null ? void 0 : n.elementFromPoint(S(t), S(r))) != null ? v : null;
  }, i = c === "requestAnimationFrame" ? he(a, { immediate: o }) : ve(a, c, { immediate: o });
  return Oe({
    isSupported: u,
    element: s
  }, i);
}
const Ce = {
  page: (e) => [e.pageX, e.pageY],
  client: (e) => [e.clientX, e.clientY],
  screen: (e) => [e.screenX, e.screenY],
  movement: (e) => e instanceof Touch ? null : [e.movementX, e.movementY]
};
function Te(e = {}) {
  const {
    type: t = "page",
    touch: r = !0,
    resetOnTouchEnds: n = !1,
    initialValue: l = { x: 0, y: 0 },
    window: c = C,
    target: o = c,
    eventFilter: u
  } = e, s = d(l.x), a = d(l.y), i = d(null), f = typeof t == "function" ? t : Ce[t], v = (g) => {
    const E = f(g);
    E && ([s.value, a.value] = E, i.value = "mouse");
  }, y = (g) => {
    if (g.touches.length > 0) {
      const E = f(g.touches[0]);
      E && ([s.value, a.value] = E, i.value = "touch");
    }
  }, b = () => {
    s.value = l.x, a.value = l.y;
  }, _ = u ? (g) => u(() => v(g), {}) : (g) => v(g), h = u ? (g) => u(() => y(g), {}) : (g) => y(g);
  return o && (w(o, "mousemove", _, { passive: !0 }), w(o, "dragover", _, { passive: !0 }), r && t !== "movement" && (w(o, "touchstart", h, { passive: !0 }), w(o, "touchmove", h, { passive: !0 }), n && w(o, "touchend", b, { passive: !0 }))), {
    x: s,
    y: a,
    sourceType: i
  };
}
function Le(e = {}) {
  const {
    window: t = C,
    initialWidth: r = 1 / 0,
    initialHeight: n = 1 / 0,
    listenOrientation: l = !0,
    includeScrollbar: c = !0
  } = e, o = d(r), u = d(n), s = () => {
    t && (c ? (o.value = t.innerWidth, u.value = t.innerHeight) : (o.value = t.document.documentElement.clientWidth, u.value = t.document.documentElement.clientHeight));
  };
  if (s(), J(s), w("resize", s, { passive: !0 }), l) {
    const a = ge("(orientation: portrait)");
    $(a, () => s());
  }
  return { width: o, height: u };
}
const M = "data-layout-helper-selected-id", Pe = /* @__PURE__ */ se({
  __name: "LayoutHelper",
  props: {
    preClasses: { default: () => [] },
    closestQuery: {},
    selectId: {},
    componentTypeAttr: {}
  },
  emits: ["selectedDataChanged"],
  setup(e, { expose: t, emit: r }) {
    const n = e;
    d(null);
    const l = Le(), { x: c, y: o } = Te({ type: "client" }), { element: u } = $e({ x: c, y: o }), s = x(() => !n.closestQuery || !u.value ? u.value : u.value.closest(".no-layout-helper") ? null : u.value.closest(n.closestQuery)), a = D(j(s));
    w("scroll", a.update, !0);
    function i(p) {
      if (!n.componentTypeAttr)
        return null;
      let m = p.getAttribute(n.componentTypeAttr);
      if (!m) {
        const A = p.querySelector(`[${n.componentTypeAttr}]`);
        A && (m = A.getAttribute(n.componentTypeAttr));
      }
      return m;
    }
    const f = x(() => s.value ? {
      display: "block",
      width: `${a.width}px`,
      height: `${a.height}px`,
      left: `${a.left}px`,
      top: `${a.top}px`,
      backgroundColor: "#3eaf7c44",
      transition: "all 0.05s linear"
    } : {
      display: "none"
    }), v = x(() => ({
      transform: `translate(calc(${c.value}px - 50%), calc(${o.value}px - 50%))`
    }));
    function y() {
      const p = d(null);
      w(document, "click", (T) => {
        const I = T.target;
        if (p.value && I.classList.contains("no-layout-helper") || I.closest(".no-layout-helper"))
          return null;
        if (!n.selectId || !s.value || s.value === p.value)
          return;
        const z = s.value;
        p.value && p.value.hasAttribute(M) && p.value.removeAttribute(M), z.setAttribute(M, n.selectId), p.value = z;
      });
      const m = D(j(p));
      w("scroll", m.update, !0);
      const A = x(() => u.value ? {
        display: "block",
        width: `${m.width}px`,
        height: `${m.height}px`,
        left: `${m.left}px`,
        top: `${m.top}px`,
        backgroundColor: "rgb(177 126 65 / 20%)"
      } : {
        display: "none"
      });
      $(p, (T) => {
        T ? r("selectedDataChanged", {
          componentType: i(T),
          classes: Array.from(T.classList).filter((I) => n.preClasses.some((z) => I.startsWith(z)))
        }) : r("selectedDataChanged", {
          componentType: null,
          classes: []
        });
      });
      const P = x(() => p.value !== null);
      return {
        currentSelectedStyles: A,
        currentSelectedElement: p,
        updateCurrentBounding: m.update,
        hasCurrentSelected: P
      };
    }
    const { currentSelectedStyles: b, currentSelectedElement: _, updateCurrentBounding: h, hasCurrentSelected: g } = y(), E = x(() => n.componentTypeAttr && s.value ? i(s.value) : null), k = x(() => {
      let p = c.value, m = o.value;
      return l.width.value - c.value < 10 && (p -= 10), o.value < 10 && (m += 10), { x: p, y: m };
    }), K = x(() => E.value ? {
      display: "block",
      left: `${k.value.x}px`,
      top: `${k.value.y}px`,
      transform: "translate(25%,-50%)"
    } : {
      display: "none"
    });
    function U(p) {
      _.value && (_.value.classList.add(...p.filter((m) => m)), h());
    }
    function Z(p) {
      if (_.value) {
        const m = Array.from(_.value.classList);
        p.forEach((A) => {
          m.forEach((P) => {
            P.startsWith(A) && (_.value.classList.remove(P), h());
          });
        });
      }
    }
    return t({
      setClasses: U,
      removeClassesByPre: Z
    }), (p, m) => (ie(), ae(ce, null, [
      F("div", {
        style: R(f.value),
        fixed: "",
        "pointer-events-none": "",
        "z-9999": "",
        border: "1 green-400"
      }, null, 4),
      F("div", {
        class: fe(["cur-selected", { "has-selected": B(g) }]),
        style: R(B(b)),
        fixed: "",
        "pointer-events-none": "",
        "z-9999": "",
        border: "1 red"
      }, null, 6),
      F("div", {
        style: R(v.value),
        fixed: "",
        "top-0": "",
        "left-0": "",
        "pointer-events-none": "",
        "w-2": "",
        "h-2": "",
        "rounded-full": "",
        "bg-green-400": "",
        shadow: "",
        "z-999": ""
      }, null, 4),
      F("div", {
        style: R(K.value),
        fixed: "",
        "top-0": "",
        "left-0": "",
        "pointer-events-none": "",
        shadow: "",
        "z-9999": "",
        rounded: "",
        "p-1": "",
        "bg-green-400": ""
      }, pe(E.value), 5)
    ], 64));
  }
});
const Ie = (e, t) => {
  const r = e.__vccOpts || e;
  for (const [n, l] of t)
    r[n] = l;
  return r;
}, Fe = /* @__PURE__ */ Ie(Pe, [["__scopeId", "data-v-700cbeeb"]]);
export {
  Fe as default
};